前言

前幾天說了Git，接下來是對於前端新手在寫一些功能時會用到的方法，其實大部分自己都知道怎麼使用，但每次要用到還是會有一點不確定想查一下，藉著這次把這些整理起來，讓知識可以留在我腦袋裡٩(ˊᗜˋ )و。

本篇會提到：replace()、replaceAll()、trim()、includes()、split()、slice()、concat()。

String()

把什麼都變成字串

使用方法

String( anything ) ⇒ 會得到被變成字串(String)的 anything 。
請注意S要是大寫喔！

實驗方法

let testNum = 56460
let testWord = String(testNum)
console.log(testWord)
console.log(typeof(testWord))

>> 56460
>> string

typeof()是檢驗型態的方法

String.prototype.replace()、string.prototype.replaceAll()

replace是取代，很直觀地有加All的話就是全部取代。

使用方法

replace('str', 'replaceStr') ⇒ 回傳的字串中的第一個 str 將被取代為 replaceStr

replaceAll('str', 'replaceStr') ⇒ 回傳的字串中的所有 str 將被取代為 replaceStr

實驗方法

命名變數 testWord 為亂打的一串文字 sda54r65ea74456835462844r

將字串中的 '4' 取代為 '%’，使用 replace() 以及 replacsAll() 的差別

let testWord = 'sda54r65ea74456835462844r';
testWord.replace('4', '%')
>> 'sda5%r65ea74456835462844r'

testWord.replaceAll('4', '%')
>> 'sda5%r65ea7%%56835%628%%r'

String.prototype.trim()

trim是 的意思修剪 (??)

使用方法

在字串後直接加上trim方法，可以將字串兩端的空白去除。

實驗

移除字串起始及結尾處的空白字元，不會改變原本的字串。

let testWord =' sd56f4d6f5dsfd d dvdsv4d5  ds56f '
console.log(testWord)
>>  sd56f4d6f5dsfd d dvdsv4d5  ds56f

let testWord =' sd56f4d6f5dsfd d dvdsv4d5  ds56f '
console.log(testWord.trim())
>> sd56f4d6f5dsfd d dvdsv4d5  ds56f

補充

如果要讓字串中間的空格消失，就要用replace了。

string.prototype.includes()

使用方法

includes(要判斷有沒有的內容)

有一樣的內容，回傳 true ，沒有相同內容，回傳 false

includes() 會區分判斷內容的大小寫。

實驗

let testWord = '200200_5465gfh4fg6h'
testWord.includes('200200')
>> true
let testWord = '200200_5465gfh4fg6h'
testWord.includes('200201')
>> false

string.prototype.split()

split是分裂的意思~

使用方法

split(separator, (limit))

第一個參數代表要拿來分割此字串的內容

第二個參數非必要，表示最多要傳回有多少長度的陣列

split() 會回傳新陣列，不會改變原本的字串。

實驗

1. srt.split(’str’) ⇒ 回傳用 str 切開的字串的陣列。

split(’…’)的括號內放指定的單字或符號，會單純以該單字或符號，將字串切割開來，輸出一個陣列。

let testWord = '5554222433346664'
testWord.split('4')
>> (5) ['555', '222', '333', '666', '']

範例這邊最後一個'4'也有被切分，切割結果的陣列最後一項是空白。

2. srt.split(’…’, num) ⇒ 回傳用 str 切開的字串的陣列，只擷取長度到第二項。

let testWord = '5554222433346664'
testWord.split('4', 2)
>> (2) ['555', '222']

3. srt.split(’str’)[num] ⇒ 直接取用以 str 切開的字串的陣列，的第 num 項。

let testWord = '5554222433346664'
testWord.split('4')[3]
>> '666'

String.prototype.slice()

slice英文是片段；用在字串或陣列上都可以，這篇文章只先示範用在字串的結果~

使用方法

slice(start, (end))

第一個參數代表從第幾項開始分成片段(0為第一項以此類推)

第二個參數非必要，表示分成片段後要在第幾個字”之前”作為結尾

slice() 不會改變原本的字串，而是會產生新的一個字串。

實驗

let testWord = '5557222733376667'
testWord.slice(3)
>> '7222733376667'

let testWord = '5557222733376667'
testWord.slice(3, 6)
>> '722'

String.prototype.concat()

英文是連接的意思~

使用方法

concat(str1(, str2, str3....))

括號中就是要連接上去字串的內容。

concat() 不會改變原本的字串，而是會產生新的一個字串。

實驗

concat() 可以連接兩個以上的字串，接續著接上去

let testWord = '123'
testWord.concat('.')
>> '123.'

let testWord = '123'
testWord.concat('', '789')
>> '123789'

let testWord = '123'
testWord.concat('', 789)
'123789'

let testWord = '123'
testWord.concat('.', '789', '.', '123')
>> '123.789.123'

總補充

1. 要是想知道string的長度，可以用 string.length 取到。

2. 各位應該對splice、slice都有點眼熟，因為它們也是陣列的方法；兩者在後面array的文章都會再提到喔。

今日結語

今天演示了 replace()、replaceAll()、trim()、includes()、split()、slice()、concat() 這些，我個人(相信也是各位前端)會常用到的String方法。

雖然這些說明，在網路上已經很多，但我還是希望能用自己的方式整理起來，如果有幸能幫助到也需要的人那就太好了！

今天就到這，如有說明不周或錯誤的地方，還請多留言討論(鞠躬)。

參考資料

trim
https://developer.mozilla.org/zh-TW/docs/Web/JavaScript/Reference/Global_Objects/String/Trim
split
https://www.freecodecamp.org/chinese/news/javascript-split-how-to-split-a-string-into-an-array-in-js/
slice
https://www.w3schools.com/jsref/jsref_slice_string.asp
concat
https://www.w3schools.com/jsref/jsref_concat_string.asp